<script setup lang="ts">

import {onMounted} from "vue";

onMounted(() => {
  initTest()
})

function initTest() {
  // 模拟动态数据更新
  function updateData() {
    // 温度随机变化 (60-70°C)
    const tempElement = document.querySelector('.status-value');
    let temp = 60 + Math.random() * 10;
    temp = Math.round(temp * 10) / 10;
    tempElement.textContent = temp;

    // 根据温度改变状态
    if (temp > 68) {
      tempElement.classList.add('danger');
      tempElement.classList.remove('warning');
      document.querySelector('.status-indicator').className = 'status-indicator danger-bg';
      document.querySelector('.status-text').textContent = '温度过高';
      document.querySelector('.status-text').className = 'status-text danger';
    } else if (temp > 65) {
      tempElement.classList.add('warning');
      tempElement.classList.remove('danger');
      document.querySelector('.status-indicator').className = 'status-indicator warning-bg';
      document.querySelector('.status-text').textContent = '温度偏高';
      document.querySelector('.status-text').className = 'status-text warning';
    } else {
      tempElement.classList.remove('warning', 'danger');
      document.querySelector('.status-indicator').className = 'status-indicator';
      document.querySelector('.status-text').textContent = '正常运行';
      document.querySelector('.status-text').className = 'status-text';
    }

    // 压力随机变化 (2.3-2.6MPa)
    const pressureElement = document.querySelectorAll('.status-value')[1];
    let pressure = 2.3 + Math.random() * 0.3;
    pressure = Math.round(pressure * 100) / 100;
    pressureElement.textContent = pressure;

    // 每2秒更新一次数据
    setTimeout(updateData, 2000);
  }

  // 启动数据更新
  updateData()
}

</script>

<template>
  <div id="right1" class="device-panel">
    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="panel-title">退火炉数据监控</div>

    <div class="status-container">

      <div class="status-item">
        <div class="data-flow" style="top: 10%;"></div>
        <div class="status-title">当日巡检次数</div>
        <div class="status-value2 warning">55</div>
      </div>
      <div class="status-item">
        <div class="data-flow" style="top: 30%;"></div>
        <div class="status-title">本月巡检次数</div>
        <div class="status-value2">455</div>
      </div>

      <div class="status-item">
        <div class="data-flow" style="top: 50%;"></div>
        <div class="status-title">总巡检次数</div>
        <div class="status-text2">2122</div>
      </div>

      <!-- 温度 -->
      <div class="status-item">
        <div class="data-flow" style="top: 10%;"></div>
        <div class="status-title">温度</div>
        <div class="status-value warning">68.5</div>
        <div class="unit">°C</div>
      </div>

      <!-- 压力 -->
      <div class="status-item">
        <div class="data-flow" style="top: 30%;"></div>
        <div class="status-title">压力</div>
        <div class="status-value">2.45</div>
        <div class="unit">MPa</div>
      </div>

      <!-- 运行状态 -->
      <div class="status-item">
        <div class="data-flow" style="top: 50%;"></div>
        <div class="status-title">运行状态</div>
        <div class="status-text">正常运行</div>
      </div>

      <!-- 状态指示灯 -->
      <div class="status-item">
        <div class="data-flow" style="top: 70%;"></div>
        <div class="status-title">设备指示灯</div>
        <div class="status-indicator warning-bg"></div>
      </div>

      <div class="status-item">
        <div class="data-flow" style="top: 70%;"></div>
        <div class="status-title">设备指示灯</div>
        <div class="status-indicator success-bg"></div>
      </div>

      <div class="status-item">
        <div class="data-flow" style="top: 70%;"></div>
        <div class="status-title">设备指示灯</div>
        <div class="status-indicator danger-bg"></div>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  margin: 0;
  background-color: #0a0a1a;
  font-family: 'Arial', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #00f7ff;
}

/* 面板标题 */
.panel-title {
  font-size: 20px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00f7ff;
  text-shadow: 0 0 10px rgba(0, 247, 255, 0.7);
  position: relative;
  z-index: 1;
}

/* 主面板容器 */
.device-panel {
  width: 21%;
  height: 27%;
  background: rgba(10, 20, 40, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.3);
  border: 1px solid rgba(0, 247, 255, 0.2);
  position: absolute;
  overflow: hidden;
}

/* 科技感边框效果 */
.device-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid transparent;
  border-image: linear-gradient(
      to right,
      rgba(0, 247, 255, 0),
      rgba(0, 247, 255, 0.8),
      rgba(0, 247, 255, 0)
  ) 1 1;
  pointer-events: none;
}

/* 网格背景 */
.device-panel::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px,
  linear-gradient(rgba(0, 247, 255, 0.1) 1px, transparent 1px) 0 0 / 20px 20px;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

.device-panel:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 0 30px rgba(0, 247, 255, 0.5);
}

/* 四角装饰 */
.corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-style: solid;
  border-color: #00f7ff;
  pointer-events: none;
}

.corner-tl {
  top: 0;
  left: 0;
  border-width: 2px 0 0 2px;
}

.corner-tr {
  top: 0;
  right: 0;
  border-width: 2px 2px 0 0;
}

.corner-bl {
  bottom: 0;
  left: 0;
  border-width: 0 0 2px 2px;
}

.corner-br {
  bottom: 0;
  right: 0;
  border-width: 0 2px 2px 0;
}

/* 状态项容器 */
.status-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  height: 90%;
  position: relative;
  z-index: 1;
}

/* 单个状态项 */
.status-item {
  background: rgba(0, 247, 255, 0.1);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 247, 255, 0.2);
  transition: all 0.3s ease;
}

.status-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 247, 255, 0.2);
}

/* 数据流动效果 */
.data-flow {
  position: absolute;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, transparent, #00f7ff, transparent);
  animation: flow 3s linear infinite;
  opacity: 0.5;
}

@keyframes flow {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 状态标题 */
.status-title {
  font-size: 19px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #00f7ff;
  text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);
}

/* 状态值 */
.status-value {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.status-value2 {
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

/* 运行状态文本 */
.status-text {
  font-size: 16px;
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.7);
}

.status-text2 {
  font-size: 22px;
  color: #00ff88;
  text-shadow: 0 0 8px rgba(0, 255, 136, 0.7);
}

/* 状态指示灯 */
.status-indicator {
  margin: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.7);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0);
  }
}

.success-bg {
  background: #00ff00 !important;
  box-shadow: 0 0 15px #00ff00 !important;
  animation: pulse-warning 2s infinite !important;
}


/* 警告状态 */
.warning {
  color: #ffff00 !important;
  text-shadow: 0 0 8px #ffff00 !important;
}

.warning-bg {
  background: #ffff00 !important;
  box-shadow: 0 0 15px #ffff00 !important;
  animation: pulse-warning 2s infinite !important;
}

@keyframes pulse-warning {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 170, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 170, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 170, 0, 0);
  }
}

/* 危险状态 */
.danger {
  color: #ff0000 !important;
  text-shadow: 0 0 8px rgba(255, 85, 85, 0.7) !important;
}

.danger-bg {
  background: #ff0000 !important;
  box-shadow: 0 0 15px 0xff0000 !important;
  animation: pulse-danger 2s infinite !important;
}

@keyframes pulse-danger {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 85, 85, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 85, 85, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 85, 85, 0);
  }
}

/* 单位文本 */
.unit {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}
</style>
